<template>
	<uv-navbar @leftClick="onClickLeft" title="订单付款"></uv-navbar>
	<view class="timer" v-if="showPay">
		<view class="up">请完成支付，否则订单将自动取消</view>
		<view class="down">剩余时间：<span id="counter">{{counter}}</span></view>
	</view>
	<view class="body" v-if="orderType==1">
		<view class="area">
			<view class="title"><span class="line">|</span> {{order.title}}</view>
			<view class="content">
				<view>预定姓名： {{order.contact_name}}</view>
				<view>预定手机： {{order.booking_tel}}</view>
				<view>订单编号： {{order.order_sn}}</view>
				<view>下单时间： {{order.add_time}}</view>
				<view>航班时间： {{order.start_time}}</view>
				<view>订单金额： ￥{{order.total}}</view>
				<view v-if="order.charge>0">服务费： {{order.charge}}</view>
				<view>订单状态： {{order.status_text}}</view>
			</view>
		</view>
		<view v-if="order.goods_order">
			<view :index="index" class="area" v-for="(item,index) in order.goods_order">
				<view class="title"><span class="line">|</span> {{item.goods.name}}</view>
				<view class="content">
					<view>预定姓名： {{item.username}}</view>
					<view>订单编号： {{item.order_sn}}</view>
					<view>预定手机： {{item.tel}}</view>
					<view>下单时间： {{item.add_time}}</view>
					<view>使用时间： {{item.go_date}}</view>
					<view>购买数量： {{item.goods_num}}</view>
					<view>订单金额： ￥{{item.order_money}}</view>
					<view>订单状态： {{item.status_text}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="body" v-else-if="orderType==2">
		<view class="area">
			<view class="title"><span class="line">|</span> {{order.goods.name}}</view>
			<view class="content">
				<view v-if="order.goods_type">选择套餐： {{order.goods_type.name}}</view>
				<view>预定姓名： {{order.username}}</view>
				<view>订单编号： {{order.order_sn}}</view>
				<view>预定手机： {{order.tel}}</view>
				<view>下单时间： {{order.add_time}}</view>
				<view>使用时间： {{order.go_date}}</view>
				<view>购买数量： {{order.goods_num}}</view>
				<view>订单金额： ￥{{order.order_money}}</view>
				<view>订单状态： {{order.status_text}}</view>
				<template v-if="order.more_info">
					<view :key="item.value" v-for="item in order.more_info" v-if="item.value">{{item.name}}：
						{{item.value}}
					</view>
				</template>
			</view>
		</view>
	</view>
	<!--酒店-->
	<view class="body" v-else-if="orderType==3">
		<view class="area">
			<view class="content">
				<view>订单编号： {{order.order_sn}}</view>
				<view>酒店名称： {{order.hotel_book.hotel_name}}</view>
				<view>预订房型： {{order.hotel_book.room_name}}</view>
				<view>预定姓名： {{order.username}}</view>
				<view>预定手机： {{order.tel}}</view>
				<view>下单时间： {{order.add_time}}</view>
				<view>入住时间： {{order.hotel_book.start_date}}</view>
				<view>离店时间： {{order.hotel_book.end_date}}</view>
				<view v-if="order.hotel_book.hotel_type == 1">房间数量： {{order.hotel_book.room_num}}</view>
				<view v-if="order.hotel_book.hotel_type == 2">入住人数： {{order.hotel_book.people_num}}<span
						style="margin-left: 1rem;color: red;"
						v-if="order.hotel_book.append_people_num>0">(加客：{{order.hotel_book.append_people_num}}人)</span>
				</view>
				<view>预订天数： {{order.hotel_book.day_num}}</view>
				<view>订单金额： ￥{{order.order_money}}</view>
				<view>订单状态： {{order.status_text}}</view>
				<view></view>
				<template v-if="order.hotel_book && order.hotel_book.date_prices.length>0">
					<view style="font-weight: 600;">价格详情</view>
					<view :key="item.date" v-for="item in order.hotel_book.date_prices">{{item.date}}：
						￥{{item.price}}
					</view>
					<view v-if="order.hotel_book.append_people_price>0">
						加客价格：￥{{order.hotel_book.append_people_price}} /人/天
					</view>
					<view v-if="order.hotel_book.cook==1">加客价格：￥{{order.hotel_book.cook_price}} /天</view>
				</template>
			</view>
		</view>
	</view>
	<view class="body" v-else-if="orderType==4">
		<view class="area">
			<uv-cell title="订单编号">{{order.order_sn}}</uv-cell>
			<uv-cell title="下单时间">{{order.add_time}}</uv-cell>
			<uv-cell title="商品总数">{{order.goods_num}}</uv-cell>
			<uv-cell title="订单金额">￥{{order.total_amount}}</uv-cell>
			<uv-cell title="支付金额">￥{{order.pay_amount}}</uv-cell>
			<uv-cell title="订单状态">{{order.status_name}}</uv-cell>
		</view>
	</view>
	<view class="footer" v-if="showPay">
		<view class="money">总额：￥<span
				style="color:red; font-size:16px;font-weight: 600">{{parseFloat(order.order_money).toFixed(2)}}</span>
		</view>
		<view @click="cancelPay(order.id)" class="cancel">暂不支付</view>
		<view @click="cancelOrder(order.tc_order_no)" class="cancel">取消订单</view>
		<view @click="payOrder(order.id)" :class="payDj > 0 ? 'cancel':'pay'">支付订单</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {},
				orderType: 1,
				counter: 0,
				showPay: false
			}
		},
		onLoad(get) {
			this.orderType = get.orderType;
			this.getDetail();
		},
		methods: {
			onClickLeft(url) {
				uni.navigateTo({
					url: url
				})
			},
			getDetail: function() {
				if (this.order_type + '' === '1') {
					// axios.post('/index/shipOrder/info', {
					// 	id: this.id
					// }).then(
					// 	res => {
					// 		this.order = res.data.data.order;
					// 		this.doCounter(this.order.timer);
					// 		this.showPay = this.order.show_pay + '' === '1';
					// 	}
					// ).catch(err => {
					// 	this.$toast('系统繁忙！')
					// });
				} else if (this.order_type + '' === '2') {
					// axios.post('/index/order/info', {
					// 	id: this.id
					// }).then(
					// 	res => {
					// 		this.order = res.data.data.order;
					// 		this.doCounter(this.order.timer);
					// 		this.showPay = this.order.show_pay + '' === '1';
					// 	}
					// ).catch(err => {
					// 	this.$toast('系统繁忙！')
					// });
				} else if (this.order_type + '' === '3') {
					// axios.post('/index/hotelorder/info', {
					// 	id: this.id
					// }).then(
					// 	res => {
					// 		this.order = res.data.data.order;
					// 		this.doCounter(this.order.timer);
					// 		this.showPay = this.order.show_pay + '' === '1';
					// 	}
					// ).catch(err => {
					// 	this.$toast('系统繁忙！')
					// });
				} else if (this.order_type + '' === '4') {
					// axios.get('/mall/order/info?id=' + this.id).then(
					// 	res => {
					// 		this.order = res.data.data.order;
					// 		this.order.order_money = this.order.pay_amount;
					// 		this.showPay = this.order.show_pay + '' === '1';
					// 	}
					// ).catch(err => {
					// 	this.$toast('系统繁忙！')
					// });
				}
			},
			cancelPay: function(id) {
				// window.history.back();
			},
			cancelOrder: function(tcOrderNo) {
				// axios.post('/index/users/cancelOrder', {
				// 	tcOrderNo: tcOrderNo,
				// }).then(function(r) {
				// 	if (r.data.code === true) {
				// 		vant.Toast(r.data.msg);
				// 		location.href = '/index/users/shiporder_list';
				// 	}
				// })
			},
			payOrder: function() {
				let that = this;
				if (typeof WeixinJSBridge === "undefined") { //支付宝
					if (this.payDj > 0) {
						uni.showToast({
							icon: 'error',
							title: '不可重复提交！',
							duration: 2000
						})
						let dj = setInterval(function() {
							that.payDj--;
							if (that.payDj <= 0) {
								clearInterval(dj)
							}
						}, 1000);
						return false;
					}
					this.payDj = 3; //3秒内不允许重复提交
					// location.href = "/index/pay/alipay?type=" + this.order_type + "&id=" + this.id;
				} else { //微信
					if (this.paySleep || this.payDj > 0) {
						uni.showToast({
							icon: 'error',
							title: '不可重复提交！',
							duration: 2000
						})
						return false;
					}
					// this.paySleep = true;
					this.payDj = 3; //3秒内不允许重复提交
					let dj = setInterval(function() {
						that.payDj--;
						if (that.payDj <= 0) {
							clearInterval(dj)
						}
					}, 1000);

					// axios.post('/index/pay/get_wechat_conf', {
					// 	id: this.id,
					// 	type: this.order_type
					// }).then(
					// 	res => {
					// 		if (res.status + '' === '200') {
					// 			res = res.data;
					// 			if (res.code + '' === '1') {
					// 				function onBridgeReady() {
					// 					WeixinJSBridge.invoke(
					// 						'getBrandWCPayRequest', {
					// 							"appId": res.data.pay_data.appId, //公众号ID，由商户传入
					// 							"timeStamp": res.data.pay_data.timeStamp, //时间戳，自1970年以来的秒数
					// 							"nonceStr": res.data.pay_data.nonceStr, //随机串
					// 							"package": res.data.pay_data.package,
					// 							"signType": "MD5", //微信签名方式：
					// 							"paySign": res.data.pay_data.paySign //微信签名
					// 						},
					// 						function(res) {
					// 							if (res.err_msg == "get_brand_wcpay_request:ok") {
					// 								if (that.order_type + '' === '4') {
					// 									location.href = '/mall/order/index'
					// 								} else {
					// 									location.href = '/index/users/shiporder_list'
					// 								}
					// 							} else {
					// 								vant.Notify({
					// 									message: res.err_msg,
					// 									duration: 5000,
					// 								});
					// 							}
					// 						}
					// 					);
					// 				}

					// 				onBridgeReady();
					// 			}
					// 		} else {
					// 			vant.Notify({
					// 				message: '系统错误',
					// 				duration: 5000,
					// 			});
					// 		}
					// 		that.paySleep = false;
					// 	}
					// )
				}
			},
			doCounter: function(time) {
				time = parseInt(time);
				if (time > 0) {
					var timerId = setInterval(() => {
						let min = parseInt(time / 60);
						let sec = parseInt(time % 60);
						this.counter = min + ' 分 ' + sec + ' 秒';
						time--;
						if (time <= 0) {
							this.counter = '';
							this.showPay = false;
							clearInterval(timerId);
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	.body {
		background-color: white;
		padding: 0 10px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		font-size: 16px;
		border-top: 1px solid #ccc;
		background-color: white;
	}

	.footer>view {
		flex: 1;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

	.footer>.cancel {
		background-color: #ddd;
	}

	.footer>.pay {
		background-color: green;
		color: white;
	}

	.van-radio-group {
		display: flex;
	}

	.van-radio-group>.van-radio {
		flex: 1;
	}

	.title {
		font-size: 14px;
		font-weight: 600;
		border-bottom: 1px solid #ddd;
		padding: 10px 0;
	}

	.title .line {
		color: green;
	}

	.clear-both {
		clear: both;
	}

	.area .content {
		font-size: 12px;
	}

	.area .content>view {
		height: 44px;
		line-height: 44px;
		padding-left: 5rem;
		border-bottom: 1px solid #ddd;
	}

	.timer {
		background-color: white;
		padding: 20px 0;
		margin-bottom: 5px;
	}

	.timer>.up {
		font-size: 18px;
		text-align: center;
		line-height: 30px;
	}

	.timer>.down {
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		color: red;
	}
</style>